<?php
	include 'checksession.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新书上架</title>

	<!--通用样式-->
	<link rel="stylesheet" type="text/css" href="../css/base.css">
	
	<!--引入layui样式-->
	<link rel="stylesheet" href="../static/css/layui.css">
	
	<!--引入页面样式-->
	<link rel="stylesheet" type="text/css" href="../css/list.css">

</head>
<body>
	
	<div class="header">
		<div class="w1200">

			<ul class="layui-nav" lay-filter="">

				<li class="logo-ico"><img src="../image/logo-4.png"></li>

			  <li class="layui-nav-item"><a href="../index.html">首页</a></li>
			  <li class="layui-nav-item layui-this">
			    <a href="javascript:;">个人中心</a>
			    <dl class="layui-nav-child"> <!-- 二级菜单 -->
			      <dd><a href="center.php">个人资料</a></dd>
			      <dd><a href="list.php">图书管理</a></dd>
			      <dd><a href="../exit.html">退出系统</a></dd>
			    </dl>
			  </li>
			  <li class="layui-nav-item"><a href="">更多资源</a></li>
			</ul>

		</div>
	</div>

	<div class="container">
		<div class="body w1200">
			
			<div class="tip">
				<div class="layui-elem-quote">
				  <p class="booklist">图书列表<a href="add.php">新书上架</a></p>
				</div>
			</div>

			<div class="form-content">

				<table class="layui-table">
				  <colgroup>
				    <col width="60">
				    <col width="500">
				    <col width="140">
				    <col>
				  </colgroup>

				  <thead>
				    <tr>
				      <th>序号</th>
				      <th>图书名称</th>
				      <th>操作</th>
				    </tr> 
				  </thead>
				  <tbody>
					
					<?php

						//连接数据库
						include '../include/common.php';

						//读取数据语句
						//ORDER BY id DESC 按照ID倒叙读取
						//ORDER BY id （ASC）按照ID顺序读取
						$query = "SELECT id,name FROM book ORDER BY id DESC";

						//执行语句
						$result = mysqli_query($conn,$query);

						//从结果记录集中以数组的形式抓取出来
						while($res=mysqli_fetch_array($result)){
							
							$name = $res['name'];

							$id = $res['id'];

							//输出到表格
							echo 
							'
								<tr>
							      <td>'.$id.'</td>
							      <td>'.$name.'</td>
							      <td><a href="javascript:void(0)" class="view" data-id='.$id.'>浏览</a> | 修改 | 删除</td>
							    </tr>
							';

						}

					?>

				    
				    
				  </tbody>
				</table>

			</div>

		</div>
	</div>
	

	<div class="footer">
		<div class="w1200"><a href="">关于我们</a> </div>
	</div>


<!--引入JQUERY-->
<script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>

<!--引入layuijs-->
<script src="../static/layui.js"></script>

<script>

layui.use('element', function(){
  var element = layui.element;
  
  //…
});

layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  //执行一个laydate实例
  laydate.render({
    elem: '#test1' //指定元素
  });
});

layui.use('form', function(){
  var form = layui.form;
 
  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});

layui.use('upload', function(){
  var upload = layui.upload;
   
  //执行实例
  var uploadInst = upload.render({
    elem: '#photo' //绑定元素
    ,url: '/upload/' //上传接口
    ,done: function(res){
      //上传完毕回调
    }
    ,error: function(){
      //请求异常回调
    }
  });
});


//浏览
$(".view").click(function(){

	var index = layer.load(0, {shade: false});

	//获取当前ID
	var id = $(this).attr('data-id');

	//使用ajax从后端拿到该条记录的全部信息
	$.get('fetchitem.php?id='+id,function(data,status){

		layer.closeAll();

		layer.open({
		  type: 1,
		  skin: 'layui-layer-rim', //加上边框
		  area: ['620px', '540px'], //宽高
		  content: data
		});

	})

})

</script>

</body>
</html>